<!-- 评分星星组件 -->
<template>
	<view class="star-box">
		<text :class="item" v-for="(item,index) in scoreStar" :key="index"></text>
	</view>
</template>

<script>
	export default {
		props:{
			score: Number
		},
		data() {
			return {
				scoreData: this.score
			};
		},
		computed:{
			scoreStar: function(){
				let starArr = [];
				let score = Math.floor(this.scoreData/2);
				for (let i=0; i<score; i++) {
					 starArr.push("active");
				}
				//补全
				while(starArr.length<5){
					starArr.push("no");
				}
				return starArr;
			}
		},
	}
</script>

<style>
	.star-box text.no{
		display: inline-block;
		margin-top: 10upx;
		width: 46upx;
		max-width: 46px;
		background: url() no-repeat left;
		background-size: 72%;
	}
	.star-box text.active{
		display: inline-block;
		width: 46upx;
		max-width: 46px;
		background: url() no-repeat left;	
		background-size: 76%;
	}
</style>
